<template>
    <view class="progress-wrap">
        <view class="pro_titl">
            {{content}}
        </view>
        <view class="progress">
            <view class="pro_index"
                :style="{width:number+'%',background:`linear-gradient(270deg, ${color1} 0%,${color2} 20%,${color3} 40%,${color4} 60%, ${color5} 80%), ${color5} 100%)` }">
            </view>
        </view>
        <!-- <view class="percentage">{{number || 0}}</view> -->
    </view>
</template>

<script>
    export default {
        props: {
            content: {
                type: '',
                default: ''
            },
            color1: {
                type: '',
                default: '#6ab5f8'
            },
            color2: {
                type: '',
                default: '#b472f6'
            },
            color3: {
                type: '',
                default: '#e65175'
            },
            color4: {
                type: '',
                default: '#b370fd'
            },
            color5: {
                type: '',
                default: '#9985ff'
            },
            color6: {
                type: '',
                default: '#9884fe'
            },
            number: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
            }
        },
    }
</script>

<style lang="scss" scoped>
    .progress-wrap {
        width: 100%;
        // padding-left: 34rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        // margin-bottom: 30rpx;

        .pro_titl {
            font-size: 28rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: bold;
            color: #656565;
            line-height: 40rpx;
        }

        .progress {
            width: 100%;
            // width: 394rpx;
            height: 20rpx;
            background: #ececec;
            border-radius: 5rpx;
            position: relative;

            .pro_index {
                position: absolute;
                top: 0;
                left: 0;
                height: 20rpx;
                background: linear-gradient(270deg, #6ab5f8 0%, #b472f6 20%, #e65175 40%, #b370fd 60%, #9985ff 80%, #9884fe 100%);
                border-radius: 15rpx;
            }
        }

        .percentage {
            width: 62rpx;
            height: 40rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: bold;
            color: #656565;
            line-height: 40rpx;
            margin-left: 24rpx;
        }
    }
</style>